@import '@/styles/index.scss';

.container {
	padding-bottom: 100rpx;
	background-color: $bgc;

	.cardCode-page {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.wrapper {
			padding: $pd 0;
			background-color: #fff;
			margin-bottom: $pd;

			.title {
				font-size: $fsm;
				color: $fc;
				text-align: center;
				margin-bottom: $pd;

				.text {
					color: $fc-on;
				}
			}

			.icon {
				text-align: center;
				margin-bottom: $pd;

				.image {
					display: inline-block;
					vertical-align: top;
					width: 400rpx;
					height: 400rpx;
				}
			}

			.line {
				position: relative;
				border-top: 2rpx dashed $bdc;
				margin-bottom: $pd;

				&::before, &::after {
					position: absolute;
					top: -30rpx;
					content: '';
					display: block;
					width: 60rpx;
					height: 60rpx;
					background-color: $bgc;
					border-radius: 50%;
				}

				&::before {
					left: -30rpx;
				}

				&::after {
					right: -30rpx;
				}
			}

			.text1, .text2, .text3 {
				text-align: center;
				font-size: $fsm;
				margin-bottom: 20rpx;
				color: $fc;
			}

			.text2 {
				color: $fc-on;
			}

			.text3 {
				color: $fc-off;
			}
		}

		.card-show {
			background-color: #fff;
			margin-bottom: 20rpx;

			.title {
				padding: 30rpx;
				text-align: center;
			}

			.content {
				width: 100%;

				.image {
					display: block;
					width: 100%;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30rpx;
			background-color: $fc-on;

			.button {
				color: #fff;
				font-size: $fsm;
				text-align: center;
			}
		}
	}
}















